<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图-->
    <el-card>
      <!--轮播图表格开始-->
      <el-table :data="bannerArr" border stripe>
        <el-table-column type="index" label="编号" width="140"></el-table-column>
        <el-table-column label="轮播图" prop="url">
          <template slot-scope="scope">
            <!--scope.row代表当前遍历的数组中的对象-->
            <img :src=scope.row.url width="280" height="150" alt="">

          </template>
        </el-table-column>
        <!--*******************************-->
        <el-table-column label="操作" width="120">
          <!--scope代表每行对应的数据里面的index属性代表下标,
          里面的row代表每行对应的数组中的对象-->
          <template slot-scope="scope">
            <!--confirm确认事件-->
            <el-popconfirm @confirm="bannerDelete(scope.$index, scope.row)"
                           title="这是一段内容确定删除吗?">
              <el-button size="mini"
                         type="danger" slot="reference">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <!--*******************************-->
      </el-table>
      <!--轮播图表格结束-->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerArr: []
    }
  },
  created() {
    this.getBannerList()
  },
  methods: {
    getBannerList() {
      let url = "http://localhost:8080/banner/select"
      this.axios.get(url).then((response) => {
        this.bannerArr = response.data.data;
      })

    },
    // 删除
    bannerDelete(index, bannerArr) {
      let url = "http://localhost:8080/banner/delete?id=" + bannerArr.id
      this.axios.get(url).then((response) => {
        this.getBannerList()
      })
    }
  }
}
</script>

<style scoped>

</style>